<template>
  <div class="index-container">
    <el-drawer v-model="dialogFormVisible" size="60%" @close="close">
      <template #header>
        <h4>{{ title }}客户信息</h4>
      </template>
      <vab-card class="card-header" shadow="never">
        <div class="page-header">
          <div class="page-header-name">
            <span>{{ baseInfo.username }}</span>
            <vab-icon
              v-if="baseInfo.gender === 1"
              icon="men-line"
              style="margin-left: 10px; color: #72c7d1"
            />
            <vab-icon
              v-else
              icon="women-line"
              style="margin-left: 4px; color: #eb9582"
            />
            <el-tag type="danger" style="margin-left: 10px">
              {{ baseInfo.bind_name }}
            </el-tag>
          </div>
          <div class="page-header-tel">
            <vab-card shadow="hover">
              <div class="card-content">
                <div class="left-content">
                  <vab-icon
                    icon="phone-fill"
                    style="
                      font-size: 20px;
                      margin-right: 5px;
                      color: rgb(247, 125, 69);
                    "
                  />
                  {{ baseInfo.mobile }}
                </div>
                <div class="right-content">
                  <el-button
                    type="primary"
                    @click="copy(baseInfo.mobile, $event)"
                  >
                    一键复制
                  </el-button>
                </div>
              </div>
            </vab-card>
            <vab-card shadow="hover">
              <div class="card-content">
                <div class="left-content">
                  <vab-icon
                    icon="wechat-fill"
                    style="
                      font-size: 20px;
                      margin-right: 5px;
                      color: rgb(65 181 132);
                    "
                  />
                  {{ baseInfo.weixin ? baseInfo.weixin : '未填写' }}
                </div>
                <div class="right-content">
                  <el-button
                    type="primary"
                    @click="copy(baseInfo.weixin, $event)"
                  >
                    一键复制
                  </el-button>
                </div>
              </div>
            </vab-card>
          </div>
          <div class="page-header-info">
            <div>录入时间:{{ baseInfo.created_at }}</div>
            <el-divider direction="vertical" />
            <div>来源:{{ baseInfo.sourcefrom_name }}</div>
            <el-divider direction="vertical" />
            <div>录入人:{{ baseInfo.input_name }}</div>
            <el-divider direction="vertical" />
            <div>分派跟进:{{ baseInfo.maker_name }}</div>
            <el-divider direction="vertical" />
            <div>上次跟进:从未跟进</div>
          </div>
        </div>
      </vab-card>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本资料" name="baseData">
          <!-- <BaseData ref="baseRef" /> -->
          <el-form ref="formRef" label-width="80px" :model="baseForm">
            <el-row>
              <el-col :span="24">
                <el-form-item label="来源" prop="sourcefrom">
                  <el-radio-group v-model="baseForm.sourcefrom">
                    <el-radio
                      v-for="(item, index) in sourcefromArr"
                      :key="index"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="称呼" prop="username">
                  <el-input v-model="baseForm.username" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机" prop="mobile">
                  <el-input v-model="baseForm.mobile" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="微信" prop="weixin">
                  <el-input v-model="baseForm.weixin" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" prop="gander">
                  <el-radio-group v-model="baseForm.gender">
                    <el-radio
                      v-for="(item, index) in genderArr"
                      :key="index"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="姓名" prop="realname">
                  <el-input v-model="baseForm.realname" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker
                    v-model="baseForm.birthday"
                    type="date"
                    format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身高" prop="height">
                  <el-input v-model="baseForm.height">
                    <template #append>cm</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="体重" prop="weight">
                  <el-input v-model="baseForm.weight">
                    <template #append>kg</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="婚况" prop="marry">
                  <el-select v-model="baseForm.marry" placeholder="客户婚况">
                    <el-option
                      v-for="item in marryArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学历" prop="education">
                  <el-select
                    v-model="baseForm.education"
                    placeholder="客户学历"
                  >
                    <el-option
                      v-for="item in educationArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职业" prop="job">
                  <el-select v-model="baseForm.job" placeholder="客户职业">
                    <el-option
                      v-for="item in jobArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收入" prop="salary">
                  <el-select v-model="baseForm.salary" placeholder="客户收入">
                    <el-option
                      v-for="item in salaryArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="民族" prop="national">
                  <el-select v-model="baseForm.national" placeholder="客户民族">
                    <el-option
                      v-for="item in nationalArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="现居地">
                  <el-cascader
                    ref="cascaderone"
                    v-model="areaOneArr"
                    :options="areaOptions"
                    :props="{ label: 'name', value: 'code' }"
                    style="width: 100%"
                    @change="handleChangeOne"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="户籍地">
                  <el-cascader
                    ref="cascadertwo"
                    v-model="areaTwoArr"
                    :options="areaOptions"
                    :props="{ label: 'name', value: 'code' }"
                    style="width: 100%"
                    @change="handleChangeTwo"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="购房" prop="house">
                  <el-select v-model="baseForm.house" placeholder="购房情况">
                    <el-option
                      v-for="item in houseArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="购车" prop="car">
                  <el-select v-model="baseForm.car" placeholder="购车情况">
                    <el-option
                      v-for="item in carArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="月花费" prop="spend">
                  <el-select v-model="baseForm.spend" placeholder="月花费情况">
                    <el-option
                      v-for="item in spendArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="吸烟" prop="smoking">
                  <el-select v-model="baseForm.smoking" placeholder="吸烟情况">
                    <el-option
                      v-for="item in smokingArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="喝酒" prop="drinking">
                  <el-select v-model="baseForm.drinking" placeholder="喝酒情况">
                    <el-option
                      v-for="item in drinkingArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="baseForm.remark"
                    type="textarea"
                    :rows="4"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div class="pay-button-group">
                  <el-button type="primary" @click="submitForm('formRef')">
                    保存
                  </el-button>
                  <el-button @click="resetForm('formRef')">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="跟进信息" name="followLogs">
          <!-- <FollowLogs ref="followRef" /> -->
          <el-row>
            <el-col :span="24">
              <vab-card shadow="always" class="follow-text-card">
                <div style="display: flex; width: 100%">
                  <div style="flex: 1">跟进内容</div>
                  <div style="flex: 13">
                    <el-form ref="logFormRef" :model="logForm">
                      <el-form-item prop="content" label="">
                        <el-input
                          v-model="logForm.content"
                          type="textarea"
                          :rows="5"
                        />
                      </el-form-item>
                      <div class="pay-button-group">
                        <el-button
                          type="primary"
                          @click="submitLogForm('logFormRef')"
                        >
                          保存
                        </el-button>
                      </div>
                    </el-form>
                  </div>
                </div>
                <div style="display: flex; width: 100%">
                  <div style="flex: 1">历史记录</div>
                  <div
                    v-if="logInfo.length !== 0"
                    style="flex: 13"
                    class="follow-logs-content"
                  >
                    <el-timeline style="padding: 0">
                      <el-timeline-item
                        v-for="(item, index) in logInfo"
                        :key="index"
                        :timestamp="item.created_at"
                      >
                        <div class="vab-info-card">
                          <div style="margin-bottom: 10px; font-weight: 600">
                            <span>跟进人：</span>
                            <span>admin</span>
                          </div>
                          <div class="list-item-meta-description">
                            <span>小记内容：</span>
                            <span>{{ item.content }}</span>
                          </div>
                        </div>
                      </el-timeline-item>
                    </el-timeline>
                  </div>

                  <div v-else class="follow-logs-content" style="flex: 13">
                    <el-empty class="vab-data-empty" description="暂无数据" />
                  </div>
                </div>
              </vab-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>
<script>
  import clip from '@/utils/clipboard'
  import { doUpdate, getFollows, insertFollow } from '@/api/custom'
  export default defineComponent({
    name: 'DetailDrawer',
    props: {
      items: {
        type: Array,
        required: true,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        cascaderone: '',
        cascadertwo: '',
        formRef: null,
        logFormRef: null,
        logForm: {},
        baseInfo: {},
        baseForm: {},
        followForm: {},
        sourcefromArr: [],
        genderArr: [],
        marryArr: [],
        educationArr: [],
        jobArr: [],
        salaryArr: [],
        nationalArr: [],
        houseArr: [],
        carArr: [],
        spendArr: [],
        smokingArr: [],
        drinkingArr: [],
        areaOneArr: [],
        areaTwoArr: [],
        areaOptions: props.items,
        logInfo: [],
        title: '',
        activeName: 'baseData',
        dialogFormVisible: false,
      })
      const showCat = (row, type) => {
        getFollow(row.id)
        state.title = '查看'
        state.activeName = type
        state.dialogFormVisible = true
        state.baseInfo = row
        state.baseForm.id = row.id
        state.baseForm.sourcefrom = row.sourcefrom
        state.baseForm.username = row.username
        state.baseForm.mobile = row.mobile
        state.baseForm.weixin = row.weixin
        state.baseForm.gender = row.gender
        state.baseForm.realname = row.realname
        state.baseForm.birthday = row.birthday
        state.baseForm.height = row.height
        state.baseForm.weight = row.weight
        state.baseForm.marry = row.marry
        state.baseForm.education = row.education
        state.baseForm.job = row.job
        state.baseForm.salary = row.salary
        state.baseForm.national = row.national
        state.baseForm.province = row.province
        state.baseForm.province_name = row.province_name
        state.baseForm.city = row.city
        state.baseForm.city_name = row.city_name
        state.baseForm.area = row.area
        state.baseForm.area_name = row.area_name
        state.baseForm.reside_province = row.reside_province
        state.baseForm.reside_province_name = row.reside_province_name
        state.baseForm.reside_city = row.reside_city
        state.baseForm.reside_city_name = row.reside_city_name
        state.baseForm.reside_area = row.reside_area
        state.baseForm.reside_area_name = row.reside_area_name
        state.areaOneArr = [
          row.province ? row.province.toString() : '',
          row.city ? row.city.toString() : '',
          row.area ? row.area.toString() : '',
        ]
        // state.areaOneArr.push(row.city.toString())
        // state.areaOneArr.push(row.area.toString())
        state.areaTwoArr = [
          row.reside_province ? row.reside_province.toString() : '',
          row.reside_city ? row.reside_city.toString() : '',
          row.reside_area ? row.reside_area.toString() : '',
        ]
        // state.areaTwoArr.push(row.reside_city.toString())
        // state.areaTwoArr.push(row.reside_area.toString())
        state.baseForm.house = row.house
        state.baseForm.car = row.car
        state.baseForm.spend = row.spend
        state.baseForm.smoking = row.smoking
        state.baseForm.drinking = row.drinking
        state.baseForm.remark = row.remark
      }

      const copy = (val, event) => {
        if (val) {
          clip(val, event)
        } else {
          $baseMessage(
            '文本内容未填写，复制失败！',
            'error',
            'vab-hey-message-error'
          )
        }
      }

      const handleClick = (tab) => {
        //这样才能获取每个el-tab-pane的name属性
        switch (tab.props.name) {
          case 'baseData':
            state.activeName = 'baseRef'
            break
          case 'followLogs':
            state.activeName = 'followRef'
            break
        }
      }

      const close = () => {
        state.dialogFormVisible = false
      }

      const handleChangeOne = () => {
        const labArr = state.cascaderone.getCheckedNodes()[0].pathLabels
        const valArr = state.cascaderone.getCheckedNodes()[0].pathValues
        state.baseForm.province = valArr[0]
        state.baseForm.province_name = labArr[0]
        state.baseForm.city = valArr[1]
        state.baseForm.city_name = labArr[1]
        state.baseForm.area = valArr[2]
        state.baseForm.area_name = labArr[2]
      }

      const handleChangeTwo = () => {
        const labArr = state.cascadertwo.getCheckedNodes()[0].pathLabels
        const valArr = state.cascadertwo.getCheckedNodes()[0].pathValues
        state.baseForm.reside_province = valArr[0]
        state.baseForm.reside_province_name = labArr[0]
        state.baseForm.reside_city = valArr[1]
        state.baseForm.reside_city_name = labArr[1]
        state.baseForm.reside_area = valArr[2]
        state.baseForm.reside_area_name = labArr[2]
      }

      const submitForm = (formName) => {
        state[formName].validate(async (valid) => {
          if (valid) {
            const { msg } = await doUpdate(state.baseForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }
      const resetForm = (formName) => {
        state[formName].resetFields()
      }

      const submitLogForm = (formName) => {
        state[formName].validate(async (valid) => {
          if (valid) {
            state.logForm.custom_id = state.baseForm.id
            const { msg } = await insertFollow(state.logForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            getFollow(state.baseForm.id)
            state[formName].resetFields()
          }
        })
      }

      const getFollow = async (custom_id) => {
        const data = await getFollows({ custom_id: custom_id })
        state.logInfo = data.data
      }

      onMounted(() => {
        const params = localStorage.getItem('params')
        const jsonParams = JSON.parse(params)
        state.sourcefromArr = Object.values(jsonParams.sourcefrom)
        state.genderArr = Object.values(jsonParams.gender)
        state.marryArr = Object.values(jsonParams.marry)
        state.educationArr = Object.values(jsonParams.education)
        state.jobArr = Object.values(jsonParams.job)
        state.salaryArr = Object.values(jsonParams.salary)
        state.nationalArr = Object.values(jsonParams.national)
        state.carArr = Object.values(jsonParams.car)
        state.houseArr = Object.values(jsonParams.house)
        state.spendArr = Object.values(jsonParams.spend)
        state.smokingArr = Object.values(jsonParams.smoking)
        state.drinkingArr = Object.values(jsonParams.drinking)
      })

      return {
        ...toRefs(state),
        showCat,
        close,
        handleClick,
        handleChangeOne,
        handleChangeTwo,
        submitLogForm,
        submitForm,
        resetForm,
        copy,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .index-container {
    .card-header {
      min-height: 145px;
      transition: none;
      display: flex;
      border-radius: 10px;

      :deep() {
        * {
          transition: none;
        }

        .el-card__body {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          width: 100%;
        }
      }

      .page-header {
        width: 100%;
        &-name {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
        }
        &-tel {
          display: flex;
          align-items: center;
          .el-card {
            flex: 1;
            margin-right: 30px;
            margin-top: 10px;
            border-radius: 10px;
            font-size: 16px;
          }
        }

        &-info {
          display: flex;
          align-items: center;
        }
      }

      .card-content {
        width: 100%;
        display: flex;
        justify-content: space-between; /* 使子元素在主轴上均匀分布，两端对齐 */
        align-items: center; /* 使子元素在交叉轴上居中，如果需要的话 */
      }

      .right-content {
        /* 如果需要，可以设置一个最小宽度 */
        min-width: fit-content; /* 或者使用具体的宽度值 */
      }
    }

    .pay-button-group {
      display: block;
      margin: 20px auto;
      text-align: center;
    }

    .follow-text-card {
      height: auto;
    }

    .follow-logs-card {
      height: 60vh;
    }
    .follow-logs-content {
      height: 50vh !important;
      overflow-y: auto;
      scrollbar-width: none;
    }

    .vab-info-card {
      position: relative;
      width: 100%;
      padding: $base-padding;
      background: #e2e2e2;
      border-radius: $base-border-radius + 2;

      &::after {
        position: absolute;
        top: 8px;
        left: -10px;
        width: 0;
        height: 0;
        overflow: hidden;
        content: '';
        border-color: #e2e2e2 transparent transparent;
        border-style: solid dashed dashed;
        border-width: 10px;
      }
    }

    .vab-data-empty {
      min-height: 0;
    }
  }
</style>
